<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<c:set var="srcPath" value="${redis:getSysConfig('sysFileVisitRoot_back')}"/>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<script type="text/javascript">
    /**关联显示分类下的商品规格组**/
	function showProductSpecificationByProductTypeId(productTypeId){
        $("#specificationProductTable").show();/** 显示添加的table**/
        $("#initSpecificationProductTable").hide();/** 隐藏修改的table**/
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "${basePath}/back/shopProduct/getProductSpecificationList.sjson",
            data: {productTypeId:productTypeId},
            success: function(data){
                var productSpecificationList = data.productSpecificationList;
                if (productSpecificationList != "" && productSpecificationList != null) {
                    var specificationHtmlStr = "";
                    for (var i = 0; i < productSpecificationList.length; i++) {
                        var specification = productSpecificationList[i];
                        var specification_param = specification.specificationId + "_" + specification.name + "_" + specification.notes;
                        specificationHtmlStr += "<div style='float:left;margin:5px 5px;'>";
                        specificationHtmlStr += "<span style='display:block;'>";
                        specificationHtmlStr += "<input onclick='showSelectedSpecification(" + specification.specificationId + ")' " +
							"id='" + specification.specificationId + "' class='check' name='specificationIds' type='checkbox' value='" + specification_param + "'/>";
                        specificationHtmlStr += "&nbsp;<label for='" + specification.specificationId + "'>" + specification.name;
                        specificationHtmlStr += "[&nbsp;" + specification.notes + "&nbsp;]</label></span></div>";
                    }
                    $("#noSpecificationTr").remove();
                    $("#specificationProductTable-title").empty();
                    $(".createdSpecificationValues").empty();
                    $("#specificationSelect").empty().html(specificationHtmlStr);
                } else {
                    $("#noSpecificationTr").html("<tr><td>该分类下无商品组合规格信息</td></tr>");
                }
            }
        });
	}

    /**显示选中的规格**/
    var count_specificationValues_id_index = 0;
    function showSelectedSpecification(specificationId) {
        var isChecked = $("#" + specificationId).attr("checked");
        if (isChecked != "checked") {
            $(".specificationValue_" + specificationId).hide();
        } else {
            $(".specificationValue_" + specificationId).show();
        }
        var check_objs = $("#specificationSelect input:checked");
        if (check_objs.length < 3) {
            var selectedSpecificationValuesHtmlStr = "";
            var specificationProductHtmlStr = "";
            $("#specificationProductTable-title").css("display", "");
            var isOwnChecked = false;
            $("#specificationSelect input:checked").each(function (i) {
                isOwnChecked = true;
                var specificationValueStringArray = this.value.split("_");
                var specificationId = specificationValueStringArray[0];
                var name = specificationValueStringArray[1];
                var notes = specificationValueStringArray[2];
                specificationProductHtmlStr += "<th style='padding:14px 10px; width:47%;' id='specification_" + specificationId + "'>";
                specificationProductHtmlStr += "&nbsp;&nbsp;<span  style='margin:6px; display:inline;  white-space:nowrap;'>" + name + "</span>";
                specificationProductHtmlStr += "<span  style=''>[&nbsp;" + notes + "&nbsp;]</span></th>";
                selectedSpecificationValuesHtmlStr += showSelectedSpecificationValue(specificationId);
            });
            specificationProductHtmlStr += "<th style='width:30%;  padding:5px 20px 0px 20px;'><button id='btn_add_specification' type='button' class='btn btn-default' onclick='addNewSpecificationValue()'>" +
				"<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>新增</button></th>";
            $("#specificationProductTable-title").html(specificationProductHtmlStr);
        } else if (check_objs.length > 2) {
            $("#" + specificationId).attr("checked", false);
            showMsg("最多选择两个规格!");
        }
    }

    //显示规格对应的规格值
    function showSelectedSpecificationValue(specificationId) {
        var selectedSpecificationValuesHtmlStr = "";
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "${basePath}/back/shopProduct/getSpecificationValueListBySpecificationId.sjson",
            async: false,
            data: {specificationId: specificationId},
            success: function (data) {
				var specificationValueList = data.specificationValueList;
				selectedSpecificationValuesHtmlStr += "<td class='specificationValue_" + specificationId + "'style='width:auto; height:30px; padding:15px 20px 0px 20px; text-align:center;'>";
				selectedSpecificationValuesHtmlStr += "<div class='form-group'>" +
					"<select class='disabled_" + specificationId + " form-control input-sm' name='specification_" + specificationId + "'>";
				for (var i = 0; i < specificationValueList.length; i++) {
					var specificationValue = specificationValueList[i];
					selectedSpecificationValuesHtmlStr += "<option value='" + specificationValue.specificationValueId + "'>" + specificationValue.name + "</option>";
				}
				selectedSpecificationValuesHtmlStr += "</select></div></td>";
            }
        });
        return selectedSpecificationValuesHtmlStr;
    }

    /**新增的规格tr计数器，便于动态生成存放规格的tr**/
    function addNewSpecificationValue() {
        var check_objs = $("#specificationSelect input:checked");
        if (check_objs.length > 0) {
            count_specificationValues_id_index++;
            var newTrHtmlStr = "<tr  class='createdSpecificationValues' id='selectedSpecificationValues_" + count_specificationValues_id_index + "'>";
            var selectedSpecificationValuesHtmlStr = "";
            var isOwnChecked = false;
            $("#specificationSelect input:checked").each(function (i) {
                isOwnChecked = true;
                var specificationValueStringArray = this.value.split("_");
                var specificationId = specificationValueStringArray[0];
                var name = specificationValueStringArray[1];
                var notes = specificationValueStringArray[2];
                selectedSpecificationValuesHtmlStr += showSelectedSpecificationValue(specificationId);
            });
            if (isOwnChecked) {
                selectedSpecificationValuesHtmlStr += "<td class='delete_text' style='width:120px;  padding:15px 20px 0px 20px; white-space:nowrap;'>" +
					"<button id='btn_add_img' type='button' class='btn btn-default' onclick='deleteSpecification(" + count_specificationValues_id_index + ");' >" +
					"<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>删除</button></td>";
            }
            newTrHtmlStr += selectedSpecificationValuesHtmlStr + "</tr>";
            $("#specificationProductTable").append(newTrHtmlStr);
            lockCheckBox();/**锁住复选框**/
        } else {
            showMsg("至少选择一个规格！");
        }
    }

    /** 删除规格商品**/
    function deleteSpecification(specificationValues_id_index) {
    	/**清除用下拉框展示规格对应的规格值**/
        $("#selectedSpecificationValues_" + specificationValues_id_index).remove();
        if ($("#specificationProductTable tr").length == 2) {
            unLockCheckBox();
        }
    }

    /** 冻结的选项变为不可用**/
    function lockCheckBox() {
        $("#specificationSelect input").each(function (i) {
            $(this).attr("disabled", "disabled");
        });
    }

    /** 释放冻结的选项变为可用**/
    function unLockCheckBox() {
        $("#specificationSelect input").each(function (i) {
            $(this).removeAttr("disabled");
        });
    }
    /** 初始化商品规格及规格值信息**/
    function initProductSpecificationInfo(currentProductId,shopProductSpecificationValueList){
		$("#specificationProductTable").hide();/** 隐藏添加的table**/
        $("#initSpecificationProductTable").show();/** 显示修改的table**/
        if(shopProductSpecificationValueList!=null && shopProductSpecificationValueList.length>0){
			var currentProduct_specificationName_HtmlStr="<tr>";/**当前商品的规格名称子串**/
			var currentProduct_specificationValueName_HtmlStr="<tr>";/**当前商品的规格值名称子串**/
			var relationProduct_specificationalueName_HtmlStr="<tr>";/**组关联商品的规格子串**/
			for(var i=0;i<shopProductSpecificationValueList.length;i++){
				var productSpecificationValue=shopProductSpecificationValueList[i];
				var productId=productSpecificationValue.productId;
				var specificationId=productSpecificationValue.specificationId;
				var specificationValueId=productSpecificationValue.specificationValueId;
				if(productId==currentProductId){/**当前商品的规格回写**/
					/**通过规格Id获取规格对象,组合当前商品的规格名称子串**/
					currentProduct_specificationName_HtmlStr+=getShopSpecificationBySpecificationId(specificationId);
					/**通过规格值Id获取规格值对象，组合当前商品的规格值名称子串**/
					currentProduct_specificationValueName_HtmlStr+=getShopSpecificationValueBySpecificationValueId(specificationValueId);
				}else{
					/**通过规格值Id获取规格值对象，组合同组商品的规格值名称子串**/
					relationProduct_specificationalueName_HtmlStr+=getShopSpecificationValueBySpecificationValueId(specificationValueId);
				}
			}
			currentProduct_specificationName_HtmlStr+="</tr>";
			currentProduct_specificationValueName_HtmlStr+="</tr>";
			relationProduct_specificationalueName_HtmlStr+="</tr>";
			$("#initSpecificationProductTable").html(currentProduct_specificationName_HtmlStr+currentProduct_specificationValueName_HtmlStr+relationProduct_specificationalueName_HtmlStr);
		}else{
            $("#initSpecificationProductTable").empty().html("<tr><td>该商品无商品组合规格信息</td></tr>");
		}
	}

	/**通过规格Id获取规格对象**/
	function getShopSpecificationBySpecificationId(specificationId){
	    var currentProduct_specificationName_SubHtmlStr="";
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "${basePath}/back/shopProduct/getShopSpecificationBySpecificationId.sjson",
            async: false,
            data: {specificationId: specificationId},
            success: function (data) {
                var specification = data;
                var name=specification.name;
                var notes=specification.notes;
                currentProduct_specificationName_SubHtmlStr="<th class='tocenter_th'>"+name+"["+notes+"]"+"</th>";
            }
        });
        return currentProduct_specificationName_SubHtmlStr;
	}

    /**通过规格值Id获取规格值对象**/
	function getShopSpecificationValueBySpecificationValueId(specificationValueId){
        var currentProduct_specificationValueName_SubHtmlStr="";
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "${basePath}/back/shopProduct/getShopSpecificationValueBySpecificationValueId.sjson",
            async: false,
            data: {specificationValueId: specificationValueId},
            success: function (data) {
                var specificationValue = data;
                var name=specificationValue.name;
                currentProduct_specificationValueName_SubHtmlStr="<td class='tocenter_td'>"+name+"</td>";
            }
        });
        return currentProduct_specificationValueName_SubHtmlStr;
	}

</script>

<div style="margin-top: 10px;">
	<div id="specificationSelect" style="width:100%;"></div>
</div>
<div style="clear: both;"></div>
<!-- 规格值 begin-->
<div style="width:100%;height:auto; overflow-x:auto; overflow-y:hidden;  ">
	<!-- 添加使用的table-->
	<table id="specificationProductTable" style="height:auto; width:100%;">
		<!--选定规格值名称 -->
		<tr id="specificationProductTable-title"  style="background-color: #E8EBF0; border-bottom-style: solid;padding:5px;"></tr>
		<!--选定规格值-->
		<tr id="selectedSpecificationValues_0"></tr>
		<tr id="noSpecificationTr"><td>无商品组合规格信息，请检查“基本信息”标签中是否已选择商品分类</td></tr>
	</table>

	<!-- 修改使用的table-->
	<table class="addOrEditTable table-bordered table" id="initSpecificationProductTable" style="height:auto; width:100%;display: none;"></table>
</div>
<!-- 规格值 end -->